<script setup lang="ts">
import { ref } from 'vue'
import { TestService, type TestRequest } from '../service/TestService';
// import TestService from "@/service/TestService"

const testService = TestService.instance;
defineProps<{ msg: string }>()

const count = ref(0);


const queryWithoutParams = async () => {
  const response = await testService.queryWithoutParams();
  console.log("无参response=", response);
}
const queryWithPathParams = async () => {
  const response = await testService.queryWithPathParams("kevin", 18);
  console.log("路径传参response=", response);
}
const queryWithRequestBody = async () => {
  let request: TestRequest = {
    requestName: "Tom ",
    requestCode: "nihao"
  }
  const response = await testService.queryWithRequestBody(request);
  console.log("参数体response=", response);
}

const create = async () => {
  let request: TestRequest = {
    requestName: "Tom ",
    requestCode: "nihao"
  }
  const response = await testService.create(request);
  console.log("create response=", response);
}
</script>

<template>
  <h1>{{ msg }}</h1>

  <div class="card">
    <button type="button" @click="count++">count is {{ count }}</button>
    <button type="button" @click="queryWithoutParams">queryWithoutParams</button>
    <button type="button" @click="queryWithPathParams">queryWithPathParams</button>
    <button type="button" @click="queryWithRequestBody">queryWithRequestBody</button>
    <button type="button" @click="create">create</button>
  </div>
</template>

<style scoped>
.read-the-docs {
  color: #888;
}
</style>
